<template>
  <div id="box">
    <van-index-bar :index-list="indexList">
      <div v-for="(item, index) in fls" :key="index">
        <div index="1" id="zxc">{{ index }}</div>
        <ul>
          <li v-for="(item1, index1) in item" :key="index1" @click="q1(item1)">
            <img :src="item1.asd" alt="" />
            <span>{{ item1.Fsinger_name }}</span>
          </li>
        </ul>
      </div>
    </van-index-bar>
  </div>
</template>
<script>
import service from "./service";
import Vue from "vue";
import { IndexBar, IndexAnchor } from "vant";

Vue.use(IndexBar);
Vue.use(IndexAnchor);

export default {
  data() {
    return {
      indexList: [],
      list: [],
      zms: [],
      fls: {},
      arr: "",
      // ulr: `http://y.gtimg.cn/music/photo_new/T001R800x800M000 ${}.jpg`,
    };
  },
  methods: {
    tp(obj) {
      obj.forEach((item) => {
        item.asd =
          "http://y.gtimg.cn/music/photo_new/T001R800x800M000" +
          item.Fsinger_mid +
          ".jpg";
      });
      return obj;
    },
    zm(obj) {
      obj.sort((a, b) => {
        return a.Findex.charCodeAt() - b.Findex.charCodeAt();
      });
      // console.log(obj);
      return obj;
    },
    fl(obj) {
      let fls = {};
      obj.map((item) => {
        if (item.Findex == 9) {
          return;
        }
        if (fls[item.Findex]) {
          fls[item.Findex].push(item);
        } else {
          fls[item.Findex] = [item];
        }
      });
      return fls;
    },
    zm1(obj) {
      let indexList = [];
      // console.log(obj);
      for (let i in obj) {
        indexList.push(i);
      }
      // console.log(indexList);
      return indexList;
    },
    q1(a) {
      // console.log(b, a.Fsinger_mid);
      this.$router.push({
        path: `/fangda/${a.Fsinger_mid}?name=${a.Fsinger_name}&img=${a.asd}`,
      });
    },
  },
  async created() {
    const result = await service.getBanner();
    this.list = this.tp(result.data.list);
    this.zms = this.zm(this.list);
    this.fls = this.fl(this.zms);
    this.indexList = this.zm1(this.fls);
    // console.log(this.list);
    // this.list = result.data.list;
    // console.log(result.data.list);
    // console.log(result.data.list.Findex);
  },
};
</script>

<style lang="less" scoped>
@import "../../../style/index.less";
img {
  .w(50);
  .h(50);
  margin-left: 8rem;
  margin-bottom: 5rem;
  border-radius: 8rem;
}
#box {
  background: black;
  color: aliceblue;
  #zxc {
    // color: rgb(236, 236, 30);
    background: #333;
    .h(30);
    padding-left: 5rem;
    line-height: 7rem;
  }
}
span {
  .h(68);
  line-height: 15rem;
  display: inline-block;
  margin-left: 5rem;
}
</style>
